<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="fei">
        <h2>{{a}}</h2>
        <h1 v-if ="a===10">{{b}}</h1>
        <h1 v-else-if="a > 10">{{c}}</h1>
        <button @click = "dian">点击</button>
    </div>

    <div id="fei2">
        <div v-if="bb%2 !== 0">{{aa}}</div>
        <button @click = "feifei">切换</button>
    </div>


    <div id="fei3">
        <button @click="fei2" v-if="aaa > 1">-</button>
        <button v-else-if="aaa=== 1" disabled>-</button>
        <h2>{{aaa}}</h2>
        <button @click="fei1" v-if="aaa < 10">+</button>
        <button v-else-if="aaa === 10" disabled>+</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>

    const {createApp , ref} = Vue
    createApp({
        setup(){
            let a = ref(0)
            let b = '我出来了'
            let c = '过了，还点'
            function dian() {
                a.value++
            }
            return{
                a,
                b,
                c,
                dian
            }
        }
    }).mount('#fei')

    createApp({
        setup(){
            let aa = ref(1)
            let bb = ref(1)
            function feifei() {
                bb.value++
            }
            return{
                aa,
                bb,
                feifei
            }
        }
    }).mount('#fei2')


    createApp({
        setup(){
            let aaa = ref(1)
            function fei1() {
                aaa.value++
            }
            function fei2() {
                aaa.value--
            }
            return{
                aaa,
                fei1,
                fei2
            }
        }
    }).mount('#fei3')


</script>
</html>